<template>
    <div class="P-index">
        <!-- <div class="parent" @click="parentHandler"> -->
        <!-- 我是父亲 -->
        <!-- <div class="sse" @click="sHandler">
            我是 self
            <div id="child" class="child" @click="childHandler">
                我是  child
                <div class="ancs" @click.passive="ancsHandler">我是 ancs</div>
            </div>
        </div> -->
        <!-- </div> -->
        <div><upbtn @click="outClick"></upbtn></div>

        <div class="t" v-test="user.name">欢迎来到 aixy 的 Vue2 案例展示</div>

        <div class="btn">
            <button @click="showTip">请点我弹出全局 toast 组件</button>
        </div>

        <div class="btn">
            <button @click="go(0)">去 list 页面</button>
        </div>

        <div class="btn">
            <button @click="go(1)">去 form 页面</button>
        </div>

        <div class="btn">
            <button @click="go(2)">
                动态添加一个页面 /temp，可以先访问一下
            </button>
        </div>

         <div class="btn">
            <button @click="go(3)">去 echart demo 页面</button>
        </div>

        <div class="btn">
            <button @click="checkRoute">
                验证路由传参 params、query、hash
            </button>
        </div>

        <div v-for="item in arr" :key="item.id" ref="li">{{ item.name }}</div>

        <div>
            <span v-for="(key, val) in user" :key="key"
                >{{ key }}-{{ val }}</span
            >
        </div>
        <!-- v-pre -->
        <div>
            <div v-if="user.name" v-once>有姓名{{ user.age }}</div>
            <div v-else-if="user.age">有 gae</div>
            <div v-else>没有姓名，没有年龄</div>
        </div>
        s

        <div>
            name: <input v-model.lazy="name" />{{ name }}{{ name.length }}
        </div>

        <user-nav :cur="cur"></user-nav>
    </div>
</template>

<script>
import userNav from "@/components/user-nav";
import upbtn from "@/components/up-btn";
export default {
    data: function () {
        return {
            name: "",
            cur: "index",
            arr: [
                {
                    id: 1,
                    name: "katy",
                },
                {
                    id: 2,
                    name: "win7",
                },
            ],
            user: {
                name: "katy",
                age: 31,
            },
        };
    },
    methods: {
        outClick(e){
            console.log('我从外部触发');
        },
        parentHandler(e) {
            console.log("parent triggered");
            // console.log(e.currentTarget);
        },
        sHandler(e) {
            e.stopPropagation();
            console.log("self triggered");
            // console.log(e.currentTarget);
        },
        childHandler(e) {
            console.log("child triggered");
            // console.log(e.currentTarget);
        },
        ancsHandler(e) {
            console.log("ancs triggered");
            // console.log(e.currentTarget);
        },
        link(e) {
            // e.preventDefault();
        },
        change(e) {
            console.log(e);
            console.log(this[e]);
            console.log(this[e].length);
        },
        checkRoute() {
            // params 在路径
            // console.log('params 在路径');
            // this.$router.push('/list/1');
            // params 在对象
            // console.log('params 在对象');
            // this.$router.push({
            //     path: '/list/:id',  //query不要传递在这里
            //     name: 'list',
            //     params: {
            //         id: 1
            //     },
            //     query: {
            //         v: 3
            //     }
            // });
            // query在路径
            // query 在对象
            // hash 在路径
            // hash 在对象
            console.log("hash 在对象");
            this.$router.push({
                path: "/list/:id", //query不要传递在这里
                name: "list",
                params: {
                    id: 1,
                },
                hash: "#hello",
            });
        },
        showTip() {
            this.$store.commit("toggleToast", "Hello world");
        },
        go(t) {
            
            if(t==2){
                //动态添加路由
                this.$router.addRoute({
                    path: "/temp",
                    component: () => import("@/pages/temp/index.vue"),
                });
                console.log("新路由添加，顺便获取所有路由记录:");
                console.log(this.$router.getRoutes());
                this.$router.push("/temp");
            }else {
                let paths = [
                    {
                        path: "/list/1?id=2",
                        // query: {id: 2},
                        hash: "#hdfhdfd",
                    },
                    "/form",
                    '',
                    '/chart'
                ];
                this.$router.push(paths[t]);
                // .catch((e) => {
                //     console.log("路由报错了");
                // });
            }
        }
    },
    beforeCreate() {
        console.log("index before create");
        console.log(this.$router.currentRoute === this.$route);
        console.log(this.$router.app);
        console.log(this.$router.mode);
    },
    mounted() {
        console.log("获取 refs：");
        console.log(this.$refs.li);
        window.setTimeout(() => {
            // this.arr[0].name = 'teed';
            // this.arr[0] = {id: 3, name: 'Teed'}
            // this.user.sex = 1;
            // this.user = Object.assign({}, this.user, {sex:1});
            // delete this.arr[0];
            this.user.name = "win7";
        }, 2000);
    },
    components: {
        userNav,
        upbtn
    },
};
</script>

<style lang="less">
// less 的引入路径中带上 ~@ 就代表根目录了，aixy会自动解析的，有点坑啊，为什么没有和小程序统一标准？
@import "@/components/common/var.less";
.parent {
    padding: 30px;
    color: #fff;
    font-size: 16px;
    background: lightcoral;
}

.sse {
    padding: 30px;
    background: lightpink;
}

.child {
    padding: 30px;
    background: lightsalmon;
}
.ancs {
    padding: 30px;
    background: lightgreen;
}

.wap {
    height: 200px;
    overflow: auto;
    background: lightblue;
}

.con {
    word-break: break-all;
    line-height: 1.5em;
    font-size: 14px;
}

.P-index {
    width: 100%;
    height: 100%;
    .t {
        text-align: center;
        padding: 40px 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .cell {
            flex: 1;
            font-size: 40px;
        }
    }

    .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;

        button {
            .btn();
        }
    }

    .theme {
        margin-top: 20px;
        justify-content: center;
        button:first-of-type {
            margin-right: 20px;
        }
    }

    .tip {
        background: #efefef;
        color: #414141;
        font-size: 28px;
        padding: 20px;
        border-radius: 10px;
        line-height: 1.6em;
        margin: 20px 10px 0;
    }

    .pic {
        display: flex;
        align-items: center;
        justify-content: space-around;
        image,
        view {
            width: 100px;
            height: 100px;
            border: 10px solid @btnColor;
            border-radius: 10px;
        }
        .view {
            background: url("./_src/ali.jpg") scroll no-repeat center center
                transparent;
        }
    }
}
</style>